<template>
  <view 
    class="album-item" 
    :class="{'selected-album': isSelected && isEditMode}"
    @click="$emit('click')" 
    @longpress="$emit('longpress')"
  >
    <!-- 选择标记 -->
    <view class="album-selection" v-if="isEditMode">
      <view 
        class="selection-circle" 
        :class="{'selected': isSelected}"
        @click.stop="$emit('select')"
      >
        <uni-icons v-if="isSelected" type="checkmarkempty" size="14" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 更多操作按钮 -->
    <view class="album-more" v-if="!isEditMode" @click.stop="$emit('more')">
      <uni-icons type="more-filled" size="18" color="#fff"></uni-icons>
    </view>
    
    <!-- 相册封面 -->
    <view class="album-cover">
      <image :src="album.cover" mode="aspectFill"></image>
      <view class="album-count">{{album.photos.length}}张</view>
    </view>
    
    <!-- 相册信息 -->
    <view class="album-info">
      <text class="album-name">{{album.name}}</text>
      <text class="album-date">{{album.date}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AlbumItem',
  props: {
    album: {
      type: Object,
      required: true
    },
    isEditMode: {
      type: Boolean,
      default: false
    },
    isSelected: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.album-item {
  width: calc(50% - 20rpx);
  margin: 10rpx;
  border-radius: 15rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.2s;
}

.selected-album {
  border: 2px solid #3a8838;
  transform: scale(0.98);
}

.album-selection {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  z-index: 5;
}

.album-more {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  z-index: 5;
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.selection-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.selection-circle.selected {
  background-color: #3a8838;
  border-color: #3a8838;
}

.album-cover {
  height: 320rpx;
  position: relative;
}

.album-cover image {
  width: 100%;
  height: 100%;
}

.album-count {
  position: absolute;
  bottom: 15rpx;
  right: 15rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 15rpx;
}

.album-info {
  padding: 15rpx;
}

.album-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
  display: block;
}

.album-date {
  font-size: 22rpx;
  color: #999;
}
</style> 